import { defineStore } from 'pinia'
import { ref } from 'vue'

// 主题定义
export interface ThemeOption {
  key: string
  name: string
  icon?: string
  color: string
}

// 可用的主题列表
export const themeOptions: ThemeOption[] = [
  { key: 'light', name: '白色主题', color: '#ffffff', icon: 'white-color' },
  { key: 'light-blue', name: '浅蓝主题', color: '#1890ff', icon: 'blue-color' },
  { key: 'pink', name: '粉色主题', color: '#eb2f96', icon: 'pink-color' },
  { key: 'green', name: '绿色主题', color: '#52c41a', icon: 'green-color' },
  { key: 'purple', name: '紫色主题', color: '#722ed1', icon: 'purple-color' },
  { key: 'dark', name: '暗黑主题', color: '#141414', icon: 'black-color' },
]

export const useThemeStore = defineStore('theme', () => {
  // 当前主题
  const currentTheme = ref<string>('light')

  // 切换主题
  function toggleTheme() {
    // 找到当前主题的索引
    const currentIndex = themeOptions.findIndex((theme) => theme.key === currentTheme.value)
    // 切换到下一个主题，如果是最后一个则回到第一个
    const nextIndex = (currentIndex + 1) % themeOptions.length
    setTheme(themeOptions[nextIndex].key)
  }

  // 设置特定主题
  function setTheme(themeKey: string) {
    currentTheme.value = themeKey
    applyTheme()
  }

  // 应用主题到文档根元素
  function applyTheme() {
    // 移除所有主题类名
    document.documentElement.classList.remove(
      'light-theme',
      'light-blue-theme',
      'pink-theme',
      'green-theme',
      'purple-theme',
      'dark-theme',
    )
    // 添加当前主题类名
    document.documentElement.classList.add(`${currentTheme.value}-theme`)

    // 直接应用主题样式到根元素
    switch (currentTheme.value) {
      case 'light':
        applyLightTheme()
        break
      case 'light-blue':
        applyLightBlueTheme()
        break
      case 'pink':
        applyPinkTheme()
        break
      case 'green':
        applyGreenTheme()
        break
      case 'purple':
        applyPurpleTheme()
        break
      case 'dark':
        applyDarkTheme()
        break
      default:
        applyLightTheme()
    }

    // 保存主题设置到localStorage
    localStorage.setItem('theme', currentTheme.value)
  }

  // 白色主题
  function applyLightTheme() {
    document.documentElement.style.setProperty('--primary-color', '#1890ff')
    document.documentElement.style.setProperty('--primary-bg-color', '#ffffff')
    document.documentElement.style.setProperty('--secondary-bg-color', '#f5f5f5')
    document.documentElement.style.setProperty('--tertiary-bg-color', '#e8e8e8')
    document.documentElement.style.setProperty('--text-primary-color', '#333333')
    document.documentElement.style.setProperty('--text-secondary-color', '#666666')
    document.documentElement.style.setProperty('--border-color', '#e0e0e0')
    document.documentElement.style.setProperty('--hover-color', '#f0f0f0')
    document.documentElement.style.setProperty('--selected-bg-color', '#e6f7ff')
    document.documentElement.style.setProperty('--selected-text-color', '#1890ff')
  }

  // 浅蓝主题
  function applyLightBlueTheme() {
    document.documentElement.style.setProperty('--primary-color', '#1890ff')
    document.documentElement.style.setProperty('--primary-bg-color', '#f0f8ff')
    document.documentElement.style.setProperty('--secondary-bg-color', '#e6f7ff')
    document.documentElement.style.setProperty('--tertiary-bg-color', '#d9ecff')
    document.documentElement.style.setProperty('--text-primary-color', '#262626')
    document.documentElement.style.setProperty('--text-secondary-color', '#595959')
    document.documentElement.style.setProperty('--border-color', '#d9e6f2')
    document.documentElement.style.setProperty('--hover-color', '#e6f7ff')
    document.documentElement.style.setProperty('--selected-bg-color', '#bae7ff')
    document.documentElement.style.setProperty('--selected-text-color', '#0050b3')
  }

  // 粉色主题
  function applyPinkTheme() {
    document.documentElement.style.setProperty('--primary-color', '#eb2f96')
    document.documentElement.style.setProperty('--primary-bg-color', '#fff0f6')
    document.documentElement.style.setProperty('--secondary-bg-color', '#ffd6e7')
    document.documentElement.style.setProperty('--tertiary-bg-color', '#ffadd2')
    document.documentElement.style.setProperty('--text-primary-color', '#262626')
    document.documentElement.style.setProperty('--text-secondary-color', '#595959')
    document.documentElement.style.setProperty('--border-color', '#ffd6e7')
    document.documentElement.style.setProperty('--hover-color', '#ffd6e7')
    document.documentElement.style.setProperty('--selected-bg-color', '#ffadd2')
    document.documentElement.style.setProperty('--selected-text-color', '#c41d7f')
  }

  // 绿色主题
  function applyGreenTheme() {
    document.documentElement.style.setProperty('--primary-color', '#52c41a')
    document.documentElement.style.setProperty('--primary-bg-color', '#f6ffed')
    document.documentElement.style.setProperty('--secondary-bg-color', '#d9f7be')
    document.documentElement.style.setProperty('--tertiary-bg-color', '#b7eb8f')
    document.documentElement.style.setProperty('--text-primary-color', '#262626')
    document.documentElement.style.setProperty('--text-secondary-color', '#595959')
    document.documentElement.style.setProperty('--border-color', '#d9f7be')
    document.documentElement.style.setProperty('--hover-color', '#d9f7be')
    document.documentElement.style.setProperty('--selected-bg-color', '#b7eb8f')
    document.documentElement.style.setProperty('--selected-text-color', '#237804')
  }

  // 紫色主题
  function applyPurpleTheme() {
    document.documentElement.style.setProperty('--primary-color', '#722ed1')
    document.documentElement.style.setProperty('--primary-bg-color', '#f9f0ff')
    document.documentElement.style.setProperty('--secondary-bg-color', '#efdbff')
    document.documentElement.style.setProperty('--tertiary-bg-color', '#d3adf7')
    document.documentElement.style.setProperty('--text-primary-color', '#262626')
    document.documentElement.style.setProperty('--text-secondary-color', '#595959')
    document.documentElement.style.setProperty('--border-color', '#efdbff')
    document.documentElement.style.setProperty('--hover-color', '#efdbff')
    document.documentElement.style.setProperty('--selected-bg-color', '#d3adf7')
    document.documentElement.style.setProperty('--selected-text-color', '#531dab')
  }

  // 暗黑主题
  function applyDarkTheme() {
    document.documentElement.style.setProperty('--primary-color', '#177ddc')
    document.documentElement.style.setProperty('--primary-bg-color', '#141414')
    document.documentElement.style.setProperty('--secondary-bg-color', '#1f1f1f')
    document.documentElement.style.setProperty('--tertiary-bg-color', '#303030')
    document.documentElement.style.setProperty('--text-primary-color', '#ffffff')
    document.documentElement.style.setProperty(
      '--text-secondary-color',
      'rgba(255, 255, 255, 0.85)',
    )
    document.documentElement.style.setProperty('--border-color', '#434343')
    document.documentElement.style.setProperty('--hover-color', '#1f1f1f')
    document.documentElement.style.setProperty('--selected-bg-color', '#111b26')
    document.documentElement.style.setProperty('--selected-text-color', '#177ddc')
  }

  // 初始化主题
  function initTheme() {
    // 从localStorage获取保存的主题设置
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme && themeOptions.some((theme) => theme.key === savedTheme)) {
      currentTheme.value = savedTheme
    }
    applyTheme()
  }

  return {
    currentTheme,
    toggleTheme,
    setTheme,
    initTheme,
    themeOptions,
  }
})
